<template>
  <div class="accountList">
    <div class="title">私教预约列表</div>

    <el-table :data="logRecords" style="width: 100%">
      <el-table-column label="课程名称" prop="title"> </el-table-column>
      <el-table-column label="预约用户" prop="userName"> </el-table-column>
      <el-table-column label="用户手机号" prop="phone"> </el-table-column>
      <el-table-column label="预约教练" prop="coachName"> </el-table-column>
      <el-table-column label="预约时间" prop="scheduleTime"> </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total" background class="turnPage">
    </el-pagination>
  </div>
</template>
<script>
import {
  getCoachCourseList
} from "@/api/getData";
export default {
  //声明数据源
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      logRecords: [],
    };
  },
  //定义方法
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCoachCourseList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCoachCourseList();
    },
    //日志列表
    getCoachCourseList(){
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      };
      getCoachCourseList(params).then((res) => {
        console.log(res)
        this.logRecords = res.data.list
        this.total = res.data.total
      });
    },
  },
  mounted() {
    this.getCoachCourseList()
  },
};
</script>

<style lang="scss" scoped>
.accountList-dialog ::v-deep {
  .el-dialog {
    width: 30%;
    max-width: 368px;
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__body {
      padding: 0 60px;
      > div {
        display: flex;
        margin-top: 30px;
        label {
          width: 60px;
          line-height: 44px;
          font-size: 18px;
        }
        .el-input__inner {
          height: 44px;
          width: 100%;
          font-size: 18px;
        }
        .el-select {
          width: 100%;
          margin: 0;
          font-size: 18px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      border-top: 1px solid #ededed;
      margin-top: 30px;
      padding: 30px 0;
      .el-button {
        width: 98px;
      }
    }
  }
}
.accountList ::v-deep {
  .el-autocomplete {
    width: 174px;
    height: 42px;
    margin-right: 20px;
  }
  .el-select {
    width: 136px;
    height: 42px;
    margin-right: 20px;
  }
  .el-date-editor {
    width: 180px;
    height: 42px;
    margin-right: 20px;
  }
}
.accountList {
  padding: 0 56px;
	.el-table::v-deep .el-table__cell{
		padding: 1.5rem 0;
	}
  .title {
    font-size: 20px;
    color: #3c3c3c;
    margin: 40px 0;
  }
  .operation {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;
    .operationBtn {
      width: 98px;
      height: 39px;
      background: #0c9a8d;
      color: #fff;
      font-size: 18px;
      padding: 0;
    }
  }
  .turnPage {
    text-align: right;
    margin-top: 20px;
  }

  .el-table::v-deep {
    thead th:first-child,
    tbody td:first-child {
      padding-left: 40px;
    }
  }
}
</style>